<template>
  <div>
    <a-tabs @change="tableChange">
      <a-tab-pane key="1" tab="入库统计"></a-tab-pane>
      <a-tab-pane key="2" tab="出库统计"></a-tab-pane>
      <a-tab-pane key="3" tab="调剂统计"></a-tab-pane>
      <a-tab-pane key="4" tab="退货统计"></a-tab-pane>
      <template v-slot:tabBarExtraContent>
        <!-- 原料列表 -->
        <a-select
          v-model:value="productId"
          v-if="tabIndex != 2"
          style="width: 150px; margin-bottom: 10px"
          @change="handleChange"
        >
          <a-select-option
            :value="item.id"
            v-for="(item, index) in originMartials"
            :key="index"
          >
            {{ item.productName }}
          </a-select-option>
        </a-select>

        <!-- 成品列表 -->
        <a-select
          v-else
          v-model:value="productId"
          style="width: 150px; margin-bottom: 10px"
          @change="outStorehouse"
        >
          <a-select-option
            :value="item.id"
            v-for="(item, index) in endProducts"
            :key="index"
          >
            {{ item.productName }}
          </a-select-option>
        </a-select>
      </template>
    </a-tabs>
    <div
      id="main"
      style="min-width: 300px; height: 500px; max-width: 100%"
    ></div>
  </div>
</template>

<script>
import echarts from 'echarts'
import { productList } from '@/api/endProduct'
import { getManagerList } from '@/api/materials'
import {
  inStorehouseCount,
  refundStorehouseCount,
  transferStorehouseCount,
  outStorehouseCount,
} from '@/api/tongji'
export default {
  data() {
    return {
      titles: ['入库统计', '出库统计', '调剂统计', '退货统计'],
      tabIndex: 1,
      endProducts: [],
      originMartials: [],
      productId: '0',
      XData: [],
      YData: [],
    }
  },
  methods: {
    drawChart() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(document.getElementById('main'))
      // 指定图表的配置项和数据
      let option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.XData,
        },
        title: {
          text: this.titles[this.tabIndex - 1],
        },
        tooltip: {
          trigger: 'axis',
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: this.YData,
            type: 'line',
            areaStyle: {
              color: 'rgb(157 211 232)',
            },
            itemStyle: {
              normal: {
                color: 'rgb(157 211 232)',
                lineStyle: {
                  color: 'rgb(157 211 232)',
                },
              },
            },
          },
        ],
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    /**
     * 统计--进货
     */
    inStorehouse() {
      return new Promise((resolve) => {
        inStorehouseCount(this.productId).then((res) => {
          this.dataDetail(res.queryResult.list)
          this.drawChart()
          resolve()
        })
      })
    },

    /**
     * 统计--退货
     */
    refundStorehouse() {
      return new Promise((resolve) => {
        refundStorehouseCount(this.productId).then((res) => {
          this.dataDetail(res.queryResult.list)
          this.drawChart()
          resolve()
        })
      })
    },

    /**
     * 统计--调剂
     */
    transferStorehouse() {
      return new Promise((resolve) => {
        transferStorehouseCount(this.productId).then((res) => {
          this.dataDetail(res.queryResult.list)
          this.drawChart()
          resolve()
        })
      })
    },
    /**
     * 统计--出库
     */
    outStorehouse() {
      return new Promise((resolve) => {
        outStorehouseCount(this.productId).then((res) => {
          this.dataDetail(res.queryResult.list)
          this.drawChart()
          resolve()
        })
      })
    },

    /**
     * 数据处理
     */
    dataDetail(data) {
      this.XData = []
      this.YData = []
      data.map((v) => {
        this.XData.push(v.month + '月')
        this.YData.push(v.count)
      })
    },
    handleChange() {
      var e = this.tabIndex.toString()
      console.log(e)
      if (e === '1') {
        this.inStorehouse()
        return
      }
      if (e === '3') {
        this.transferStorehouse()
        return
      }
      if (e === '4') {
        this.refundStorehouse()
        return
      }
    },
    tableChange(e) {
      this.productId = '0'
      this.tabIndex = e

      if (e === '1') {
        this.inStorehouse()
        return
      }
      if (e === '2') {
        this.outStorehouse()
        return
      }
      if (e === '3') {
        this.transferStorehouse()
        return
      }
      if (e === '4') {
        this.refundStorehouse()
        return
      }
    },
    /**
     * 成品list  出库查询需要
     */
    products() {
      var form = {
        pageNum: 1,
        pageSize: 1000000,
        type: 0,
      }
      productList(form).then((res) => {
        this.endProducts = res.queryResult.list
        this.endProducts.unshift({
          id: '0',
          productName: '全部',
        })
        this.productId = res.queryResult.list[0].id
      })
    },
    /**
     * 获取原材料list
     */
    getoriginalProductList() {
      var form = {
        pageNum: 1,
        pageSize: 1000000,
        type: 0,
      }
      getManagerList(form).then((res) => {
        this.originMartials = res.queryResult.list
        this.originMartials.unshift({
          id: '0',
          productName: '全部',
        })
      })
    },
  },
  mounted() {
    this.products()
    this.getoriginalProductList()
    this.inStorehouse()
  },
}
</script>